<template>
  <div class="bookShelf">
    <!-- todo 头部 -->
    <header class="wrap">
      <router-link to="/search" tag="div" class="search">
        <div class="logo icon-sousuo iconfont"></div>
        <div class="text">请输入书名或作者名</div>
      </router-link>
      <div v-if="bookList.length" class="btn" @click="popup = !popup">编辑</div>
    </header>

    <!-- todo 书架 -->
    <ul class="booklist wrap">
      <li v-for="vl in bookList" :key="vl.bookId" v-show="bookList">
        <a class="img">
          <router-link
            tag="img"
            :to="'/details?id=' + vl.bookId"
            :src="vl.bookImg"
            alt=""
          />
          <div
            :class="['btn_bg']"
            @click="vl.checked = !vl.checked"
            v-show="popup"
          >
            <div
              :class="[
                'btn',
                'iconfont',
                { con: vl.checked },
                { 'icon-close': vl.checked },
              ]"
            ></div>
          </div>
        </a>
        <!-- <div class="title">{{ vl.bookName }}</div> -->
      </li>
      <li>
        <router-link to="/index" class="img">
          <img src="../assets/imgs/list1/mask.png" alt="" />
        </router-link>
      </li>
    </ul>
    <!-- todo 书架 -->

    <!-- 弹出层 -->
    <van-popup
      v-model="popup"
      :overlay="false"
      position="bottom"
      :style="{ height: '8%' }"
      class="popup1"
      v-if="bookList.length"
    >
      <div class="item" @click="popup = false"><span>取消</span></div>
      <div class="item" @click="toggle_all">
        <span>{{ toggleAll ? "取消全选" : "全选" }}</span>
      </div>
      <div class="item" @click="del">
        <span>删除({{ toggleNum }})</span>
      </div>
    </van-popup>
    <!-- 弹出层 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null, // 用户数据
      bookList: null, // 用户书架
      popup: false, // 弹出层
    };
  },
  methods: {
    // 获取用户数据
    getUserDataFun() {
      let userId = localStorage.getItem("userId");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (this.userInfo[userId].bookList) {
        this.bookList = this.userInfo[userId].bookList;
      }
    },
    // 编辑书架
    toggle_all() {
      this.toggleAll = !this.toggleAll;
    },
    // 删除书籍
    del() {
      let userId = localStorage.getItem("userId");
      this.userInfo[userId].bookList = this.bookList.filter((vl) => !vl.checked);
      this.bookList = this.bookList.filter((vl) => !vl.checked);

      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
    },
  },
  created() {
    this.getUserDataFun();
  },
  computed: {
    toggleNum: function () {
      if (this.bookList) {
        return this.bookList.reduce((total, vl) => {
          if (vl.checked) {
            return (total += 1);
          } else {
            return total;
          }
        }, 0);
      } else {
        return "";
      }
    },
    toggleAll: {
      get() {
        if (this.bookList) {
          return this.bookList.every((vl) => vl.checked);
        } else {
          return false;
        }
      },
      set(check) {
        if (this.bookList) {
          this.bookList.forEach((vl) => (vl.checked = check));
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.bookShelf {
  height: 100%;

  header {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    padding: 8px 16px;

    > div {
      height: 31px;
      color: #999;
      border-radius: 5px;
      background: #f5f5f5;
    }

    > .search {
      display: flex;
      flex: 1;
      align-items: center;

      > .logo {
        font-size: 18px;
        margin-left: 8px;
      }

      > .text {
        font-size: 14px;
        margin-left: 4px;
      }
    }

    > .btn {
      width: 15%;
      height: 31px;
      line-height: 31px;
      font-size: 13px;
      text-align: center;
      margin-left: 5px;
      background: #f5f5f5;
      border-radius: 5px;
    }
  }

  .booklist {
    box-sizing: border-box;
    padding: 16px 12px 0;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;

    > li {
      width: 33.3%;
      margin-bottom: 8px;

      > .img {
        display: block;
        width: 100%;
        padding: 8px 12px;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;

        > .btn_bg {
          position: absolute;
          z-index: 200;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          transition: all 0.3s;

          > .btn {
            content: "";
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            color: #fff;
            font-weight: bold;

            &.con {
              background: #23b383;
              border-color: #23b383;
            }
          }
          transition: all 0.3s;
        }

        > img {
          width: 100%;
          height: 100%;
          box-shadow: 0 6px 10px 0 rgb(0 0 0 / 8%);
        }
      }

      > .title {
        height: 36px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 12px;
        font-size: 13px;
      }

      &:last-of-type {
        .img {
          &::after,
          &::before {
            content: "";
            width: 16px;
            height: 2px;
            position: absolute;
            background: #d7dbde;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 10;
          }

          &::after {
            transform: rotate(90deg);
          }

          img {
            box-shadow: unset;
          }
        }
      }
    }
  }

  .popup1 {
    border-top: 1px solid #f0f0f0;
    display: flex;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px -3px 10px 0 #f0f0f0;

    > .item {
      flex: 1;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      color: #23b383;

      &::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        right: -1px;
        top: 0;
        background: #f0f0f0;
      }
    }
  }
}
</style>